<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="ie lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="ie lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!-- <![endif]-->

<head>
  <title>Happy Birthday</title>
  <meta charset="UTF-8" />
  <meta name="description" content="Happy Birthday">
  <meta name="robots" content="index, follow" />
  <link rel="author" href="https://plus.google.com/u/1/+AyushSharma1/" />
  <meta name="keywords" content="Birthday, Happy">
  <!-- Strat of Facebook Meta -->
  <meta property="og:type" content="E-Greeting" />
  <meta property="og:image" content="favicon.ico" />
  <meta property="og:description" content="Wish you a very Happy Birthday">
  <!-- End of Facebook Meta Tags -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0,minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="HandheldFriendly" content="true">
  <meta name="MobileOptimized" content="320">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  <link rel="stylesheet" type="text/css" href="css/loading.css">
  <link href='css/Signika.css' rel='stylesheet' type='text/css'>
  <!-- <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> -->
  <link rel="stylesheet" type="text/css" href="css/cake.css">
  <!-- <link rel="stylesheet/less" href="cake.less">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.js"></script> -->
  <style type="text/css">
    /*自适应圆角投影*/
    .round_shade_box {
      width: 1px;
      height: 1px;
      font-size: 0;
      display: none;
      _background: white;
      _border: 1px solid #cccccc;
    }

    .round_shade_top {
      margin: 0 12px 0 10px;
      background: url(image/zxx_round_shade.png) repeat-x -20px -40px;
      _background: white;
      zoom: 1;
    }

    .round_shade_topleft {
      width: 11px;
      height: 10px;
      background: url(image/zxx_round_shade.png) no-repeat 0 0;
      _background: none;
      float: left;
      margin-left: -11px;
      position: relative;
    }

    .round_shade_topright {
      width: 12px;
      height: 10px;
      background: url(image/zxx_round_shade.png) no-repeat -29px 0;
      _background: none;
      float: right;
      margin-right: -12px;
      position: relative;
    }

    .round_shade_centerleft {
      background: url(image/zxx_round_shade.png) no-repeat 0 -1580px;
      _background: none;
    }

    .round_shade_centerright {
      background: url(image/zxx_round_shade.png) no-repeat right -80px;
      _background: none;
    }

    .round_shade_center {
      font-size: 14px;
      margin: 0 12px 0 10px;
      padding: 10px;
      background: white;
      letter-spacing: 1px;
      line-height: 1.5;
    }

    .round_shade_bottom {
      margin: 0 12px 0 11px;
      background: url(image/zxx_round_shade.png) repeat-x -20px bottom;
      _background: white;
      zoom: 1;
    }

    .round_shade_bottomleft {
      width: 11px;
      height: 10px;
      background: url(image/zxx_round_shade.png) no-repeat 0 -30px;
      _background: none;
      float: left;
      margin-left: -11px;
      position: relative;
    }

    .round_shade_bottomright {
      width: 12px;
      height: 10px;
      background: url(image/zxx_round_shade.png) no-repeat -29px -30px;
      _background: none;
      float: right;
      margin-right: -12px;
      position: relative;
    }

    .round_shade_top:after,
    .round_shade_bottom:after,
    .zxx_zoom_box:after {
      display: block;
      content: ".";
      height: 0;
      clear: both;
      overflow: hidden;
      visibility: hidden;
    }

    .round_box_close {
      padding: 2px 5px;
      font-size: 12px;
      color: #ffffff;
      text-decoration: none;
      border: 1px solid #cccccc;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      background: #000000;
      opacity: 0.8;
      filter: alpha(opacity=80);
      position: absolute;
      right: -5px;
      top: -5px;
    }

    .round_box_close:hover {
      opacity: 0.95;
      filter: alpha(opacity=95);
    }

    /*自适应圆角投影结束*/
    .zxx_zoom_left {
      width: 45%;
      float: left;
      margin-top: 20px;
      border-right: 1px solid #dddddd;
    }

    .zxx_zoom_left h4 {
      margin: 5px 0px 15px 5px;
      font-size: 1.1em;
    }

    .small_pic {
      display: inline-block;
      width: 48%;
      height: 150px;
      font-size: 120px;
      text-align: center;
      *display: inline;
      zoom: 1;
      vertical-align: middle;
    }

    .small_pic img {
      padding: 3px;
      background: #ffffff;
      border: 1px solid #cccccc;
      vertical-align: middle;
    }

    .zxx_zoom_right {
      width: 50%;
      float: left;
      margin-top: 20px;
      padding-left: 2%;
    }

    .zxx_zoom_right h4 {
      margin: 5px 0px;
      font-size: 1.1em;
    }

    .zxx_zoom_right p.zxx_zoom_word {
      line-height: 1.5;
      font-size: 1.05em;
      letter-spacing: 1px;
      margin: 0 0 35px;
      padding-top: 5px;
    }
  </style>
</head>

<body>
  <div class="loading"></div>
  <audio class="song" controls loop>
    <source src="hbd.mp3">
    </source>
    Your browser isn't invited for super fun audio time.
  </audio>
  <div class="balloons text-center" id="b1">
    <h2 style="color:#F2B300;">B</h2>
  </div>
  <div class="balloons text-center" id="b2">
    <h2 style="color:#0719D4;">i</h2>
  </div>
  <div class="balloons text-center" id="b3">
    <h2 style="color:#D14D39;">r</h2>
  </div>
  <div class="balloons text-center" id="b4">
    <h2 style="color:#8FAD00;">t</h2>
  </div>
  <div class="balloons text-center" id="b5">
    <h2 style="color:#8377E4;">h</h2>
  </div>
  <div class="balloons text-center" id="b6">
    <h2 style="color:#99C96A;">d</h2>
  </div>
  <div class="balloons text-center" id="b7">
    <h2 style="color:#20CFB4;">a</h2>
  </div>
  <div class="balloons text-center" id="b8">
    <h2 style="color:#8377E4;">y</h2>
  </div>

  <img src="image/Balloon-Border.png" width="100%" class="balloon-border">


  <div class="container">

    <div class="row">
      <div class="col-md-2 col-xs-2 bulb-holder">
        <div class="bulb" id="bulb_yellow"></div>
      </div>
      <div class="col-md-2 col-xs-2 bulb-holder">
        <div class="bulb" id="bulb_red"></div>
      </div>
      <div class="col-md-2 col-xs-2 bulb-holder">
        <div class="bulb" id="bulb_blue"></div>
      </div>
      <div class="col-md-2 col-xs-2 bulb-holder">
        <div class="bulb" id="bulb_green"></div>
      </div>
      <div class="col-md-2 col-xs-2 bulb-holder">
        <div class="bulb" id="bulb_pink"></div>
      </div>
      <div class="col-md-2 col-xs-2 bulb-holder">
        <div class="bulb" id="bulb_orange"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-center">
        <img src="image/banner.png" class="bannar">
      </div>
    </div>
    <!-- <div class="row message">
			<div class="col-md-12"><p>Khushbu</p></div>
		</div> -->
    <div class="row cake-cover">
      <div class="col-md-12 texr-center">
        <div class="cake">
          <div class="velas">
            <div class="fuego"></div>
            <div class="fuego"></div>
            <div class="fuego"></div>
            <div class="fuego"></div>
            <div class="fuego"></div>
          </div>
          <div class="cobertura"></div>
          <div class="bizcocho"></div>
        </div>
      </div>
    </div>
    <div class="row message">
      <div class="col-md-12">
        <p>亲爱的</p>
        <p>18岁生日快乐~</p>
      </div>
    </div>
    <p style="display: none;" id="blank">　</p>
    <center id="cen1">
      <div id="pho1" style="display: inline-block;">
        <!-- <div class="photo sample4" style="display: none;" id="pic11">
          <a href="#pic1"><span></span><img src="pic/pic1.jpg" alt="image" class="picbox"></a>
        </div> -->
        <!-- <div class="photo sample4" style="display: none;" id="pic12">
          <a href="#pic2"><span></span><img src="pic/pic2.jpg" alt="image" class="picbox"></a>
        </div>
        <div class="photo sample4" style="display: none;" id="pic13">
          <a href="#pic3"><span></span><img src="pic/pic3.jpg" alt="image" class="picbox"></a>
        </div>
        <div class="photo sample4" style="display: none;" id="pic14">
          <a href="#pic4"><span></span><img src="pic/pic4.jpg" alt="image" class="picbox"></a>
        </div> -->
      </div>
      <div id="pho2" style="margin-top: 15px; display: inline-block;">
        <!-- <div class="photo sample4" style="display: none;" id="pic15">
          <a href="#pic5"><span></span><img src="pic/pic5.jpg" alt="image" class="picbox"></a>
        </div>
        <div class="photo sample4" style="display: none;" id="pic16">
          <a href="#pic6"><span></span><img src="pic/pic6.jpg" alt="image" class="picbox"></a>
        </div>
        <div class="photo sample4" style="display: none;" id="pic17">
          <a href="#pic7"><span></span><img src="pic/pic7.jpg" alt="image" class="picbox"></a>
        </div>
        <div class="photo sample4" style="display: none;" id="pic18">
          <a href="#pic8"><span></span><img src="pic/pic8.jpg" alt="image" class="picbox"></a>
        </div> -->
      </div>
    </center>

    <center id="cen2">
      <div id="pho1" style="display: inline-block;">
        <div class="photo sample4" style="display: none;" id="pic21">
          <a href="#pic1"><span></span><img src="pic/pic1.jpg" alt="image" class="picbox"></a>
        </div>
        <!-- <div class="photo sample4" style="display: none;" id="pic22">
          <a href="#pic2"><span></span><img src="pic/pic2.jpg" alt="image" class="picbox"></a>
        </div>
        <div class="photo sample4" style="display: none;" id="pic23">
          <a href="#pic3"><span></span><img src="pic/pic3.jpg" alt="image" class="picbox"></a>
        </div> -->
      </div>
      <div id="pho2" style="margin-top: 10px; display: inline-block;">
        <!-- <div class="photo sample4" style="display: none;" id="pic24">
          <a href="#pic4"><span></span><img src="pic/pic4.jpg" alt="image" class="picbox"></a>
        </div>
        <div class="photo sample4" style="display: none;" id="pic25">
          <a href="#pic5"><span></span><img src="pic/pic5.jpg" alt="image" class="picbox"></a>
        </div>
        <div class="photo sample4" style="display: none;" id="pic26">
          <a href="#pic6"><span></span><img src="pic/pic6.jpg" alt="image" class="picbox"></a>
        </div> -->
      </div>
      <div id="pho2" style="margin-top: 10px; display: inline-block;">
        <div class="photo sample4" style="display: none;" id="pic27">
          <a href="#pic7"><span></span><img src="pic/pic7.jpg" alt="image" class="picbox"></a>
        </div>
        <div class="photo sample4" style="display: none;" id="pic28">
          <a href="#pic8"><span></span><img src="pic/pic8.jpg" alt="image" class="picbox"></a>
        </div>
      </div>
    </center>

    <!-- 要放大显示的div -->
    <div id="pic1" style="display:none;"><img src="pic/pic1.jpg" /></div>
    <div id="pic2" style="display:none;"><img src="pic/pic2.jpg" /></div>
    <div id="pic3" style="display:none;"><img src="pic/pic3.jpg" /></div>
    <div id="pic4" style="display:none;"><img src="pic/pic4.jpg" /></div>
    <div id="pic5" style="display:none;"><img src="pic/pic5.jpg" /></div>
    <div id="pic6" style="display:none;"><img src="pic/pic6.jpg" /></div>
    <div id="pic7" style="display:none;"><img src="pic/pic7.jpg" /></div>
    <div id="pic8" style="display:none;"><img src="pic/pic8.jpg" /></div>

    <div class="navbar navbar-fixed-bottom">
      <div class="row">
        <div class="col-md-6 text-center col-md-offset-3">
          <button class="btn btn-primary" id="turn_on">点我点我</button>
          <button class="btn btn-primary" id="play">动次打次~</button>
          <button class="btn btn-primary" id="bannar_coming">加点儿装饰~</button>
          <button class="btn btn-primary" id="balloons_flying">起飞！！！</button>
          <button class="btn btn-primary" id="cake_fadein">下个节目~</button>
          <button class="btn btn-primary" id="light_candle">点个蜡烛呀宝儿~</button>
          <button class="btn btn-primary" id="wish_message">Happy Birthday</button>
          <button class="btn btn-primary" id="story">大哥的悄悄话~</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/content_zoom.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/effect.js"></script>
<script>
  (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
  })(window, document, 'script', 'js/analytics.js', 'ga');

  ga('create', 'UA-58229732-1', 'auto');
  ga('send', 'pageview');

  $(document).ready(function () {
    $('#pho1 a').fancyZoom({ scaleImg: true, closeOnClick: true });
    $('#pho2 a').fancyZoom({ scaleImg: true, closeOnClick: true });
  });

</script>

</html>